<template>
  <div class="category">
    <el-card>
      <div class="header" slot="header">商品分类</div>
      <div class="card-body">
        <!-- 条件查询 -->
        <el-form
          :inline="true"
          class="demo-form-inline"
          :model="searchData"
          ref="searchFormData"
        >
          <el-form-item label="分类名称">
            <el-input
              placeholder="分类名称"
              v-model="searchData.category_name"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- 分类列表 -->
        <el-table
          :style="{ width: tableWidth + 'px' }"
          stripe
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="category_name" label="分类名称" sortable>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)">
                {{ scope.row.isEdit ? "完成" : "编辑" }}
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 修改弹窗 -->
    <el-dialog
      class="category-dialog"
      title="修改商品分类数据"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        :model="updateForm"
        label-width="120px"
        class="category-update-form"
        :rules="rules"
        ref="categoryUpdateForm"
      >
        <el-input v-model="updateForm.id" type="hidden"></el-input>
        <el-input v-model="updateForm.parent_id" type="hidden"></el-input>
        <el-form-item label="商品分类名称" prop="category_name">
          <el-input
            v-model="updateForm.category_name"
            placeholder="商品分类名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateCategoryData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getGoodsCategory,
  deleteGoodsCategoryById,
  addGoodsCategory,
} from "@/api/Goods";
export default {
  data() {
    return {
      // 弹窗的标记
      dialogFormVisible: false,
      // 修改的数据对象
      updateForm: {
        id: "",
        category_name: "",
        parent_id: "",
      },
      rules: {
        category_name: {
          required: true,
          message: "请输入分类名称",
          trigger: "blur",
        },
      },
      searchData: {
        category_name: "",
      },
      tableData: [],

      currentPage: 1,
      pageSize: 5,
      total: 7,

      // 表格的宽度
      tableWidth: 0,
    };
  },
  methods: {
    // 条件查询
    onSubmit() {
      this.loadGoodsCategory();
    },
    // 修改商品分类
    handleEdit(row) {
      this.dialogFormVisible = true;
      this.updateForm.id = row.id;
      this.updateForm.category_name = row.category_name;
      this.updateForm.parent_id = row.parent_id;
    },
    // 删除商品分类
    handleDelete(row) {
      // 判断当前删除的如果是一级分类，需要判断一级分类下面有没有二级分类，如果有就提示不能删除
      // 必须先删除二级分类，保证一级下面没有二级分类，才能上传一级分类
      if (!row.children || row.children.length == 0) {
        // 一级分类没有二级分类，或者当前就是二级分类
        // 调用后台接口删除数据
        deleteGoodsCategoryById({ id: row.id }).then((resp) => {
          let respData = resp.data;
          if (respData.code == 20000) {
            // 删除成功，刷新表格
            this.loadGoodsCategory();
          }
        });
      } else {
        // 一定是二级分类
        this.$message({
          message: "请先删除二级分类，再删除一级分类",
          type: "error",
        });
      }
    },
    // 修改分页每页显示的条数
    handleSizeChange(size) {
      this.pageSize = size;
      this.loadGoodsCategory();
    },
    // 修改分页的页码
    handleCurrentChange(page) {
      this.currentPage = page;
      this.loadGoodsCategory();
    },

    // 获取商品分类数据
    loadGoodsCategory() {
      getGoodsCategory({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchData,
      }).then((resp) => {
        let respData = resp.data;
        if (respData.code == 20000) {
          this.tableData = respData.data;
          this.total = respData.total;
        }
      });
    },

    // 修改数据
    updateCategoryData() {
      // 表单验证
      this.$refs.categoryUpdateForm.validate((data) => {
        if (data) {
          addGoodsCategory(this.updateForm).then((resp) => {
            let respData = resp.data;
            if (respData.code == 20000) {
              // 提交数据，隐藏窗口
              this.dialogFormVisible = false;
              // 数据清空
              this.updateForm = {
                id: "",
                category_name: "",
                parent_id: "",
              };
              this.loadGoodsCategory();
            }
          });
        }
      });
    },
  },
  created() {
    this.loadGoodsCategory();
    this.tableWidth = screen.availWidth - 300;
  },
};
</script>

<style lang="less" scoped>
.category {
  height: 100%;
  width: 100%;
  /deep/ .el-dialog {
    width: 600px;
    .el-input {
      width: 440px;
    }
  }
}
</style>
